<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar
      title="网易严选"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    <!-- 轮播图 -->
    <van-swipe
      style="margin-top: 1.2rem"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item v-for="(n, index) in swiperImgs" :key="index">
        <img :src="n" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 弹出购买框 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      @add-cart="onAddCartClicked"
      @buy-clicked="onBuyClicked"
    />

    <!-- 价格栏 -->
    <div style="background-color: red">
      <span style="color: white; margin: 0.2rem; font-size: 0.4rem"
        >每日抄底||距结束1天五小时</span
      >
      <div
        style="
          width: 100%;
          height: 1.5rem;
          font-size: 1rem;
          color: white;
          font-weight: 800;
          margin-left: 0.5rem;
        "
      >
        ¥{{ this.$store.state.goods_info.price }}
      </div>
    </div>
    <!-- 标题 -->
    <div>
      <div style="font-weight: 800; font-size: 0.5rem">
        {{ this.$store.state.goods_info.goods_txt }}
      </div>
      <img src="@/assets/haoping.png" style="width: 30%" alt="" />
    </div>
    <!-- 详情 -->
    <div>
      <img v-for="(n, index) in introduceImgs" :src="n" :key="index" alt="" />
    </div>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" to="/order" text="购物车" :badge="this.$store.state.order_all.length"/>
      <van-goods-action-icon icon="star-o" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="onClickButton"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      show: false,
      sku: {},
      goods: {
        // 数据结构见下方文档
        picture: this.$store.state.goods_info.imageurl,
      },
      swiperImgs: this.$store.state.goods_info.swiperImgs,
      introduceImgs: this.$store.state.goods_info.introduceImgs,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickButton() {
      if (!localStorage.getItem("user")) {
        Dialog.confirm({
          title: "未登录",
          message: "是否登录",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
        return false;
      } else {
        this.show = true;
      }
    },
    // 点击收藏按钮触发事件
    onAddCartClicked(skuData) {
      console.log(skuData);
      console.log(skuData.selectedSkuComb.imgUrl);
      // 判断用户有没有登录
      if (!localStorage.getItem("user")) {
        Dialog.confirm({
          title: "未登录",
          message: "是否登录",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
        return false;
      } else {
        this.show = false;
        let order_all = {
          order_imgUrl: skuData.selectedSkuComb.imgUrl,
          order_info: skuData.selectedSkuComb.info,
          order_price: skuData.selectedSkuComb.price / 100 + ".00",
          order_selectedNum: skuData.selectedNum,
        };
        this.$store.commit("muChangeOrder_all", order_all);
      }
    },
    // 点击收藏按钮触发事件
    onBuyClicked(skuData) {
      console.log(skuData);
      let pay_all = {
        pay_imgUrl: skuData.selectedSkuComb.imgUrl,
        pay_info: skuData.selectedSkuComb.info,
        pay_price: skuData.selectedSkuComb.price / 100 + ".00",
        pay_selectedNum: skuData.selectedNum,
      };
      this.$store.commit("muChangePay_all", pay_all);
      this.$router.push("/pay");
    },
  },
  created() {
    let tree_v = this.$store.state.goods_info.tree_v;
    let v = [];
    let list = [];
    tree_v.forEach((item, index) => {
      v.push({
        id: item.id,
        name: item.name,
        imgUrl: item.imgUrl,
        previewImgUrl: item.imgUrl,
      });
      list.push({
        id: 2259, // skuId
        s1: item.id, // 规格类目 k_s 为 s1 的对应规格值 id
        price: item.price, // 价格（单位分）
        stock_num: 110, // 当前 sku 组合对应的库存
        imgUrl: item.imgUrl,
        info: item.name,
      });
    });
    let sku = {
      tree: [
        {
          k: "颜色/规格", // skuKeyName：规格类目名称
          k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          v: v,
          largeImageMode: true, //  是否展示大图模式
        },
      ],
      // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
      list: list,
      price: this.$store.state.goods_info.price, // 默认价格（单位元）
      stock_num: 227, // 商品总库存
      collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
      none_sku: false, // 是否无规格商品
      hide_stock: false, // 是否隐藏剩余库存
    };
    this.sku = sku;
  },
};
</script>

<style>
</style>